/*清楚默认样式*/
*{
    padding: 0;
    margin: 0;
}
@font-face {
    font-family: 'icomoon';
    src:  url('./icomoon-v1.0/fonts/icomoon.eot?x5bfos');
    src:  url('./icomoon-v1.0/fonts/icomoon.eot?x5bfos#iefix') format('embedded-opentype'),
    url('./icomoon-v1.0/fonts/icomoon.ttf?x5bfos') format('truetype'),
    url('./icomoon-v1.0/fonts/icomoon.woff?x5bfos') format('woff'),
    url('./icomoon-v1.0/fonts/icomoon.svg?x5bfos#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.g-nav{
    height: 40px;
    background-color: #f8f8f8;
}
/*公共样式*/
ul{
    list-style: none;
    text-align: center;
    line-height: 40px;
}
li,a,i{
    font-size: 12px;
    text-decoration: none;
    color:#b3b3b3;
}
li a:hover{
    color: #fcbe7d;
}
/*特殊样式*/
.u-lu{
    float: left;
    margin-left: 45px;
}
.u-lu li{
    float: left;
}
/*特殊的单元*/
.u-lu .s-a{
    color: #929292;
}
.u-lu .s-a:hover{
    color: #fcbe7d;
}
.u-lu .s-abox{
    border: 1px solid #e8e8e8;
}
.u-lu i{
    font-style: normal;
}
.u-lu .s-amargin{
    margin-left: 27px;
    color: #fcbe7d;
}
.u-ru{
    float: right;
    margin-right: 61px;
}
.u-ru li{
    float: left;
    padding-left: 32px;
}
/*搜索*/
.g-search{
    height: 157px;

}
.g-search .m-box{
    position: relative;
    padding-top: 27px;
    height: 157px;
}
.m-box .m-logo{
    width: 129px;
    height: 46px;
    position: absolute;
    left: 45px;
}
.m-box .u-search{
    width: 473px;
    height: 41px;
    padding-right: 80px;
    position: absolute;
    left: 368px;
    border: 1px solid #f8f8f8;
    border-radius: 5px;
}
.m-box .u-search .u-text{
    width: 100%;
    height: 100%;
    border: 0;
    color: #b3b3b3;
    font-size: 16px;
    text-indent: 15px;
    outline: none;
}
.m-box .u-search .u-button{
    width: 80px;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: #ffc300;
    border: 0;
}
.m-box .u-l{
    position: absolute;
    left: 325px;
    bottom: 26px;
}
.m-box .u-l li{
    float: left;
    margin-right: 42px;
}
.m-box .u-l li a{
    font-size: 18px;
    color: #181818;
}
.g-subnav{
    height: 417px;
    background: #f8f8f8;
    position: relative;
}
.g-subnav .m-side{
    position: absolute;
    top:-50px;
    left: 45px;
    background-color: white;
    width: 230px;
    padding: 15px;
}
.m-side{
    /* 盒子模型 */
    background-color: #fff;
    width:230px;
    height:475px;
    border:solid 1px #e8e8e8;

    /*
        绝对定位 ,脱流,后面的元素上提
    */
    position:absolute;
    left:45px;
    top:-50px;
}
.m-side h5{
    margin-top:10px;
    margin-left:10px;
}
.m-side i{
    font-style: normal;
}
.m-side ul{
    margin-top:10px;
    text-align: left;
}
.m-side li{

    /* margin-left: 10px; */
    /* margin 导致选中行 透父容器底色少一块,所以改用padding解决这个问题 */
    padding-left:10px;
    font-size: 13px;
    color:#929292;
    /* 调整li 的高度 */
    line-height: 35px;
}
.m-side li:hover{
    color:#fcbe7d;
    background-color:#e8e8e8;
}

/*
    这个是特殊操作
    寻找特殊位置的元素
    :first-child 第一个元素
    :last-child  最后一个元素
    注意该示例需要是执行  li>  直接子元素
*/
.m-side li>:first-child{

    margin-right: 15px;
    font-family: 'icomoon';
    font-size: 13px;
}
.m-side li>:last-child{
    /* 水平位置如果margin自己解决不了那么可以配合float一起 */
    float: right;
    margin-right: 10px;
    margin-top:10px;

    font-family: 'icomoon';
    font-size: 13px;
}


/* 侧边栏icon字体 */
.m-side .u-food {

    /* 字体家族,字体大小,提到上面公共css中 */
    /* font-family: 'icomoon';
    font-size: 16px; */
    color:#ff8200;
}
.m-side .u-waimai{
    color:#ffb500;
}
.m-side .u-jiudian{
    color:#8f4a26;
}
/* 第二种方式 添加图标 */
.m-side .u-minsu:before{
    content:'\e902';
    color:#ffd36f;
}
/*
    1.下载icon字体
    2.把整个字体工程 引入到当前工程中
    3.css文件中 引入@font 并且修改目录 注意目录一定要正确
    4.html文件中引入 字体工程的 style.css 文件
    5.复制方框 或 \编号  编写对应的css .class 向控制文字一样
    6.css类中必须写上 font-family: 'icomoon'; :before方式不需要加
    7.所有icon字体 命名都以u-拼音名命名 : 因为一个一面可能应用几十个icon 这样容易找
      也容易与其他组件进行区分
 */
.m-side .u-jipiao:before{
    content:'\e9af';
    color:#009ff2;
}
.m-side .u-ktv:before{
    content:'\e9a1';
    color:#00ba8e;
}
.m-side .u-jianshen:before{
    content:'\e9b2';
    color:#00a8f4;
}
.m-side .u-jiazhuang:before{
    content:'\e902';
    color:#0dc19a;
}
.m-side .u-jiuba:before{
    content:'\e90c';
    color:#0dc19a;
}
.m-side .u-yiliao:before{
    content:'\e998';
    color:#00a8f4;
}
.m-side .u-peixun:before{
    content:'\e920';
    color:#0dc19a;
}
.s-box{
    position: absolute;
    left: 310px;
    height: 252px;
    width: 951px;

}
.s-box .s-kp{
    position: absolute;
    width: 550px;
    height: 240px;
    left: 10px;
}
.s-box .s-kp2{
    position: absolute;
    width: 150px;
    height: 240px;
    left: 570px;
}
.s-box .s-box2{
    position: absolute;
    width: 229px;
    height: 240px;
    left: 730px;
    background-color: white;
}
.s-box .s-box2 .s-kp3{
    margin-top: 30px;
    margin-left: 80px;
    border-radius: 50%;
    width: 60px;
}
.s-ul li{
    color: #181818;
    font-size: 20px;
    text-align: center;
}
.s-box2 .s-ul .s-zl{
    width: 120px;
    height: 38px;
    border-radius: 20px;
    background-color: white;
    border-color: #b3b3b3;
}
.box{
    position: absolute;
    left: 320px;
    margin-top: 250px;
    width: 951px;
    height: 252px;
}
.box .kp{
    width: 269px;
    height: 165px;
}
.box .kp2{
    width: 150px;
    height: 165px;
    margin-left: 4px;
}
.box .box2{
    position: absolute;
    width: 229px;
    height: 166px;
    background-color: white;
    left: 720px;
    margin-top: -170px;
}
.box .box2 .kp3{
    margin-left: 75px;
    width: 75px;
    height: 75px;
    margin-top: 10px;
}
